<template>
  <div>
    <div class="search-position">
      <search-input v-if="isExperimentMgn()" placeholder="请输入用户名" @search="handleSearchByMobile" />
      <search-input v-else placeholder="请输入实验名称" @search="handleSearchByTitle" />
    </div>
    <template v-if="pageObj.list && pageObj.list.length > 0">
      <el-table :data="pageObj.list" style="width: 100%; margin-top: 6px">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="子实验/模块名称"><span>{{ props.row.childProjectTitle }}</span></el-form-item>
              <el-form-item label="分组名称"><span>{{ props.row.group_name }}</span></el-form-item>
              <el-form-item label="组里的角色"><span>{{ props.row.role_in_group }}</span></el-form-item>
              <el-form-item label="组员名称"><span>{{ props.row.group_members }}</span></el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column v-if="isExperimentMgn()" prop="mobile" label="用户名" />
        <el-table-column v-if="isExperimentMgn() === false" prop="title" label="实验名称" />
        <el-table-column width="80" :formatter="formatStatus" label="实验状态" />
        <el-table-column width="80" prop="score" label="实验成绩" />
        <el-table-column prop="startTime" label="实验开始时间" width="180" />
        <el-table-column prop="endTime" label="实验结束时间" width="180" />
        <el-table-column prop="timeUsed" label="实验用时(秒)" />
        <el-table-column label="">
          <template slot-scope="scope">
            <el-popover
              placement="left"
              width="1000"
              trigger="click"
              @show="loadDetailData(scope.row.id)"
            >
              <el-table :data="detailData">
                <el-table-column width="100" property="title" label="实验步骤" />
                <el-table-column width="160" property="startTime" label="开始时间" />
                <el-table-column width="160" property="endTime" label="结束时间" />
                <el-table-column width="60" property="score" label="得分" />
                <el-table-column width="60" property="evaluation" label="评价" />
                <el-table-column property="repeatCount" label="操作次数" />
                <el-table-column property="timeUsed" label="用时(秒)" />
                <el-table-column width="120" property="expectUsed" label="合理用时(秒)" />
                <el-table-column width="60" property="maxScore" label="满分" />
                <el-table-column property="scoringModel" label="赋分模型" />
              </el-table>
              <el-button slot="reference" type="text" size="mini">明细</el-button>
            </el-popover>
            <el-button v-if="scope.row.reportId !== null" type="text" size="mini" @click="download(scope.row.reportId)">报告</el-button>
          </template>
        </el-table-column>
      </el-table>
      <d-page :page="pageObj" style="margin-top: 15px; margin-bottom: 15px;" @btnClick="getPage" />
    </template>
    <el-empty v-else description="实验成绩 空空如也" />
  </div>
</template>
<script>
import SearchInput from '@/components/common/SearchInput.vue'
import DPage from '@/components/common/Page.vue'
import cookies from '@/utils/cookies'
import config from '@/config'
import { experimentScoreList, experimentScoreStepList } from '@/api/course.js'
import 'assets/css/brower.css'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    SearchInput,
    DPage
  },
  props: {
    username: {
      type: Object,
      default: null
    },
    appid: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      pageObj: {},
      mobile: '',
      title: '',
      detailData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    isExperimentMgn() {
      if (this.appid && this.appid.length > 0) {
        return true
      }
      return false
    },
    handleSearchByMobile(mobile) {
      this.mobile = mobile
      this.getList()
    },
    handleSearchByTitle(title) {
      this.title = title
      this.getList()
    },
    formatStatus(row) {
      if (row.status === 1) {
        return '完成'
      }
      if (row.status === 2) {
        return '未完成'
      }
      return '_'
    },
    getList(targetPage) {
      const params = {
        pageCurrent: targetPage !== undefined ? targetPage : 1,
        pageSize: 10
      }
      if (this.username && this.username.length > 0) {
        params.username = this.username
      }
      if (this.appid && this.appid.length > 0) {
        params.appid = this.appid
      }
      if (this.mobile && this.mobile.length > 0) {
        params.mobile = this.mobile
      }
      if (this.title && this.title.length > 0) {
        params.title = this.title
      }
      experimentScoreList(params).then(res => {
        // this.$nuxt.$loading.finish()
        if (res) {
          this.pageObj = res
        } else {
          this.pageObj = {}
        }
      }).catch(() => {
        // this.$nuxt.$loading.finish()
        this.$msgBox({
          content: '数据加载失败，请稍后重试',
          isShowCancelBtn: false
        })
      })
    },
    getPage(targetPage) {
      // window.scrollTo(0, 0)
      this.getList(targetPage)
    },
    loadDetailData(scoreId) {
      experimentScoreStepList({ id: scoreId }).then(res => {
        // this.$nuxt.$loading.finish()
        if (res) {
          this.detailData = res
        } else {
          this.detailData = []
        }
      }).catch(() => {
        // this.$nuxt.$loading.finish()
        this.$msgBox({
          content: '数据加载失败，请稍后重试',
          isShowCancelBtn: false
        })
      })
    },
    download(reportId) {
      const token = cookies.getInClient(config.tokenName)
      const url = config.baseUrl + '/course/auth/experiment/score/download/' + reportId + '?token=' + token
      // window.open(url)

      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.demo-table-expand {
  font-size: 0;
  padding-left: 60px;
}
.demo-table-expand label {
  // width: 200px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.search-position {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  height: 57px;
  float: right;
}
</style>
